import React from 'react';
import styles from './index.less';
import {btnSound, playSound} from "@/utils/sounds-res";
import AdvancedSpin from "@/spinner";

// import {backgroundSound, playSound, stopSound} from "@/utils/sounds-res";

class HistoryVersion extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      text: '',
      data: [],
    };
  }

  componentDidMount() {
    this.setState({ data: this.props.versionData });
    // 播放背景音乐
    this.startBackgroundMusic();
  }

  startBackgroundMusic = () => {
    this.timeoutId = setTimeout(() => {
      // 播放背景音乐
      // playSound(backgroundSound);

      let val = 0;
      let speed = 25;
      const maxHeight = this.scrollRef.scrollHeight;

      let interId = setInterval(() => {
        if(this.scrollRef) {
          let currTop = this.scrollRef.scrollTop;
          // 判断是否人为滑动
          if(Math.abs(currTop - val) > 5) {
            clearInterval(interId);
          } else {
            val++;
            this.scrollRef.scrollTop = val;
            if(val > maxHeight) {
              clearInterval(interId);
            }
          }
        }
      }, speed);
    }, 1000);
  }

  goBack = () => {
    playSound(btnSound);
    this.props.goBack();
  }

  componentWillUnmount() {
    // stopSound(backgroundSound);
    clearTimeout(this.timeoutId);
  }

  render() {
    const { data } = this.state;
    return (
      <div className={styles.bg}>
        <div className={styles.scroll} ref={ref => this.scrollRef = ref}>
          {
            data.map((item, idx) => {
              return (
                <div className={styles.wrap} key={idx}>
                  <div className={styles.line}/>
                  <div className={styles.dot}/>
                  <div className={styles.content}>
                    <div className={styles.title}>
                      {item.date}
                      <span className={styles.version}> {item.version}</span>
                    </div>
                    <ul>
                      {
                        item.event.map((obj, index) => {
                          return (
                            <li key={index}>
                              <span>{obj.changeType}</span>
                              <span>{obj.content}</span>
                            </li>
                          );
                        })
                      }
                    </ul>
                  </div>
                </div>
              );
            })
          }
        </div>
        <div className={styles.page} onClick={this.goBack}>
          <img src={require('@/assets/images/back.png')} width={'100%'} height={'100%'} alt={''}/>
        </div>
        <AdvancedSpin text={this.state.text} show={this.state.loading}/>
      </div>
    );
  }

}

export default HistoryVersion;
